<template>
  <div>
    <h2>在线答题</h2>
    <el-form :model="answers">
      <div
          v-for="(q, idx) in exam.questions"
          :key="idx"
          style="margin-bottom: 20px"
      >
        <div style="font-weight: bold">{{ idx + 1 }}. {{ q.title }}</div>

        <!-- 单选 -->
        <el-radio-group
            v-if="q.type === 'single'"
            v-model="answers[idx]"
        >
          <el-radio
              v-for="(opt, i) in q.options"
              :key="i"
              :label="opt.content"
          >
            {{ opt.content }}
          </el-radio>
        </el-radio-group>

        <!-- 多选 -->
        <el-checkbox-group
            v-if="q.type === 'multiple'"
            v-model="answers[idx]"
        >
          <el-checkbox
              v-for="(opt, i) in q.options"
              :key="i"
              :label="opt.content"
          >
            {{ opt.content }}
          </el-checkbox>
        </el-checkbox-group>

        <!-- 文本回答 -->
        <el-input
            v-if="q.type === 'text'"
            type="textarea"
            v-model="answers[idx]"
            placeholder="请输入答案"
        />
      </div>

      <el-form-item>
        <el-button type="primary" @click="submit">提交答案</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const MOCK_EXAM = {
  title: '示例试卷',
  questions: [
    {
      title: '你最喜欢的颜色？',
      type: 'single',
      options: [{ content: '红色' }, { content: '绿色' }, { content: '蓝色' }]
    },
    {
      title: '请选择你擅长的语言',
      type: 'multiple',
      options: [
        { content: 'JavaScript' },
        { content: 'Python' },
        { content: 'Java' }
      ]
    },
    {
      title: '请简述你对 Vue 的理解',
      type: 'text'
    }
  ]
};

export default {
  name: 'TakeExam',
  data() {
    return {
      exam: { questions: [] },
      answers: [],    // ← 改成数组
      loaded: false
    };
  },
  created() {
    // 模拟异步加载
    setTimeout(() => {
      this.exam = MOCK_EXAM;
      // 直接用 map 生成一个响应式数组
      this.answers = this.exam.questions.map(q =>
          q.type === 'multiple' ? [] : ''
      );
      this.loaded = true;
    }, 100);
  },
  methods: {
    submit() {
      console.log('模拟提交的答案：', this.answers);
      this.$message.success('答案已模拟提交，查看控制台');
    }
  }
};
</script>
